<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Google Material Design & Flutter </title>
  <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
  <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  <link rel="stylesheet" href="./index.css">
</head>
<body>
  <div id="root">
    <!-- {{}} -->
    <!-- 带有波浪感觉？很好的交互性感觉，手指按下去，晕开来的感觉 android  ripple 波浪-->
    <!-- <div class="xButton ripple">按钮</div>
    <div class="xButton ripple circle">按钮</div>
    <div class="xButton ripple primary">按钮</div>
    <div class="xButton ripple warning">按钮</div> -->  
  </div>
  <script type="text/babel">
    // 封一个组件
    // 页面上有一个root元素， 写的不是具体的代码， 
    // 写的是为了未来要用的组件，写抽像的， 共用的组件代码， 
    // document.body.appendChild()
    // react 里一个返回html的就是组件
    // 函数用来做封装的， html, css , js 
    function Button(props) {
      // 百般变化， 试应需求 前端开发， 变成组件开发
      // 小程序只是甜点， 简单
      //props 参数管家
      console.log(props);
      // console.log(props.children)
      let { children, type, circle, onClick, block } = props
      // console.log(type);
      return (
        // <div className ="xButton ripple" >
        <div 
        onClick={onClick}
        className = {`xButton ripple ${type?type:''} ${circle?circle:''} ${block?'block':''}`} >
        { children }
        </div>
      )
    } 

    // 渲染组建API
    // 不写基本的html, 而用封装过后的组件
    ReactDOM.render(
      <div>
        <Button>default</Button>
        <Button type="primary">primary</Button>
        <Button type="warning">warn</Button>
        <Button type="primary" block>primary&block</Button>
        <Button type="warning" shape="circle">circle</Button>
        <Button onClick={() => { alert('hiha')}}>hiha</Button>
      </div>,
    //根结点
    document.getElementById('root'))
    </script>
</body>
</html>